<template>
    <div class="closure-list-container">
        <!-- 筛选区域 -->
        <el-card class="filter-card" shadow="hover">
            <el-form :inline="true" :model="filterForm" class="filter-form">
                <el-form-item label="结案号">
                    <el-input v-model="filterForm.closureId" placeholder="请输入结案号" clearable style="width: 220px" />
                </el-form-item>
                <el-form-item label="结案类型">
                    <el-select v-model="filterForm.closureType" placeholder="请选择" clearable style="width: 220px">
                        <el-option label="正常赔付结案" :value="1" />
                        <el-option label="拒赔结案" :value="2" />
                        <el-option label="部分赔付结案" :value="3" />
                        <el-option label="预赔抵扣后结案" :value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch" :icon="Search">查询</el-button>
                    <el-button @click="handleReset" :icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 列表区域 -->
        <el-card class="list-card" shadow="hover">
            <el-table :data="tableData" border stripe style="width: 100%" :loading="loading">
                <el-table-column prop="closureId" label="结案编号" min-width="200" />
                <el-table-column prop="reportNo" label="报案号" min-width="200" />
                <el-table-column prop="policyId" label="保单编号" min-width="180" />
                <el-table-column prop="insuredName" label="投保人姓名" min-width="140" />
                <el-table-column prop="phone" label="投保人电话" min-width="160" />
                <el-table-column label="结案类型" min-width="160">
                    <template #default="scope">
                        <el-tag :type="getClosureTypeTag(scope.row.closureType)">{{
                            getClosureTypeText(scope.row.closureType) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="preClaimAmount" label="已预赔(元)" min-width="120">
                    <template #default="scope">{{ formatMoney(scope.row.preClaimAmount) }}</template>
                </el-table-column>
                <el-table-column prop="finalPayAmount" label="最终赔付(元)" min-width="140">
                    <template #default="scope">{{ formatMoney(scope.row.finalPayAmount) }}</template>
                </el-table-column>
                <el-table-column prop="actualPayAmount" label="实际支付(元)" min-width="140">
                    <template #default="scope">{{ formatMoney(scope.row.actualPayAmount) }}</template>
                </el-table-column>
                <el-table-column label="结案时间" min-width="200">
                    <template #default="scope">{{ formatDateTime(scope.row.closureTime) }}</template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" :icon="View"
                            @click="handleView(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :total="pagination.total" :page-sizes="[5, 10, 20, 50]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <!-- 详情弹窗 -->
        <el-dialog v-model="detailVisible" title="结案详情" width="900px">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="结案编号">{{ detailData.closureId }}</el-descriptions-item>
                <el-descriptions-item label="报案号">{{ detailData.reportNo }}</el-descriptions-item>
                <el-descriptions-item label="核赔ID">{{ detailData.verificationId }}</el-descriptions-item>
                <el-descriptions-item label="保单号">{{ detailData.policyId }}</el-descriptions-item>
                <el-descriptions-item label="投保人姓名">{{ detailData.insuredName }}</el-descriptions-item>
                <el-descriptions-item label="投保人电话">{{ detailData.phone }}</el-descriptions-item>
                <el-descriptions-item label="灾祸类型">{{ getDisasterTypeText(detailData.disasterType)
                }}</el-descriptions-item>
                <el-descriptions-item label="结案类型">{{ getClosureTypeText(detailData.closureType)
                }}</el-descriptions-item>
                <el-descriptions-item label="结案时间">{{ formatDateTime(detailData.closureTime) }}</el-descriptions-item>
                <el-descriptions-item label="已预赔">{{ formatMoney(detailData.preClaimAmount) }}</el-descriptions-item>
                <el-descriptions-item label="最终赔付">{{ formatMoney(detailData.finalPayAmount) }}</el-descriptions-item>
                <el-descriptions-item label="实际支付">{{ formatMoney(detailData.actualPayAmount) }}</el-descriptions-item>
                <el-descriptions-item label="是否通知农户">{{ detailData.noticeStatus === 1 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="通知时间">{{ formatDateTime(detailData.noticeTime) }}</el-descriptions-item>
                <el-descriptions-item label="结案意见" :span="2">{{ detailData.closureOpinion }}</el-descriptions-item>
                <el-descriptions-item label="损失概况" :span="2">{{ detailData.lossSummary }}</el-descriptions-item>
                <el-descriptions-item label="农户反馈" :span="2">{{ detailData.farmerFeedback || '-'
                }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <el-button @click="detailVisible = false">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, View } from '@element-plus/icons-vue'
import hxxp from '@/utils/hxxp'

const loading = ref(false)
const detailVisible = ref(false)

const filterForm = reactive({
    closureId: '',
    closureType: null
})

const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
})

const tableData = ref([])
const detailData = reactive({})

const formatMoney = (v) => {
    if (v === null || v === undefined) return '0.00'
    const n = Number(v)
    return isNaN(n) ? '-' : n.toFixed(2)
}

const formatDateTime = (v) => (v ? String(v).replace('T', ' ') : '-')

const getClosureTypeText = (t) => ({
    1: '正常赔付结案',
    2: '拒赔结案',
    3: '部分赔付结案',
    4: '预赔抵扣后结案'
})[Number(t)] || '未知'

const getClosureTypeTag = (t) => ({
    1: 'success',
    2: 'danger',
    3: 'warning',
    4: 'info'
})[Number(t)] || 'info'

// 灾祸类型映射
const disasterTypeMap = {
    1: '暴雨',
    2: '洪水',
    3: '病虫害',
    4: '疫病',
    5: '其他'
}

const getDisasterTypeText = (t) => disasterTypeMap[Number(t)] || '未知'

const fetchClosureList = async () => {
    loading.value = true
    try {
        const params = {
            pageNum: pagination.currentPage,
            pageSize: pagination.pageSize,
            closureId: filterForm.closureId || undefined,
            closureType: filterForm.closureType || undefined
        }

        const res = await hxxp.get('/aiClaimClosure/list', { params })
        if (res.code === 100200) {
            tableData.value = res.data.list || []
            pagination.total = res.data.total || 0
            console.log(res.data.list);

        } else {
            ElMessage.error(res.msg || '获取结案列表失败')
        }
    } catch (e) {
        console.error(e)
        ElMessage.error('获取结案列表失败，请稍后重试')
    } finally {
        loading.value = false
    }
}

const handleSearch = () => {
    pagination.currentPage = 1
    fetchClosureList()
}

const handleReset = () => {
    filterForm.closureId = ''
    filterForm.closureType = null
    pagination.currentPage = 1
    fetchClosureList()
}

const handleSizeChange = (size) => {
    pagination.pageSize = size
    pagination.currentPage = 1
    fetchClosureList()
}

const handleCurrentChange = (page) => {
    pagination.currentPage = page
    fetchClosureList()
}

const handleView = async (row) => {
    try {

        // 使用列表数据填充详情
        Object.assign(detailData, {
            ...row,
            // 确保所有字段都有默认值
            verificationId: row.verificationId || '-',
            disasterType: row.disasterType || '-',
            insuredName: row.insuredName || '-',
            phone: row.phone || '-',
            noticeStatus: row.noticeStatus || 0,
            noticeTime: row.noticeTime || '-',
            closureOpinion: row.closureOpinion || '-',
            lossSummary: row.lossSummary || '-',
            farmerFeedback: row.farmerFeedback || '-',
        })
        detailVisible.value = true
    } catch (e) {
        console.error(e)
        ElMessage.error('获取详情失败，请稍后重试')
    }
}

onMounted(() => {
    fetchClosureList()
})
</script>
<style scoped>
.closure-list-container {
    padding: 20px;
}

.filter-card {
    margin-bottom: 16px;
}

.pagination {
    margin-top: 16px;
    text-align: right;
}
</style>
